import React, { useState, useEffect } from 'react';
import { Modal, Select, Input, Row, Col, Typography, ConfigProvider, theme, message } from 'antd';
import { getOperationTypes } from '@/services/project';
import { addVideoOperations } from '@/services/segment';

const { Text } = Typography;
const { Option } = Select;

interface TransitionModalProps {
    visible: boolean;
    onCancel: () => void;
    onSuccess: () => void;
    draftId: string;
    trackId: string;
    segmentId: string;
}

const TransitionModal: React.FC<TransitionModalProps> = ({
    visible,
    onCancel,
    onSuccess,
    draftId,
    trackId,
    segmentId,
}) => {
    const [transitionTypes, setTransitionTypes] = useState<string[]>([]);
    const [selectedType, setSelectedType] = useState<string>('');
    const [duration, setDuration] = useState<string>('1s');
    const [loading, setLoading] = useState<boolean>(false);
    const [submitting, setSubmitting] = useState<boolean>(false);

    // 暗黑主题配置
    const darkTheme = {
        algorithm: theme.darkAlgorithm,
        token: {
            colorPrimary: '#715bb8',
            colorBgContainer: '#2a2a2a',
            colorBgElevated: '#2a2a2a',
            colorText: '#ffffff',
            colorTextSecondary: 'rgba(255, 255, 255, 0.7)',
            colorBorder: '#434343',
            colorBorderSecondary: '#434343',
            borderRadius: 6,
            colorFillSecondary: '#434343',
        },
        components: {
            Modal: {
                colorBgElevated: '#2a2a2a',
                colorText: '#ffffff',
            },
            Select: {
                colorBgContainer: '#2a2a2a',
                colorBorder: '#434343',
                colorText: '#ffffff',
            },
            Input: {
                colorBgContainer: '#2a2a2a',
                colorBorder: '#434343',
                colorText: '#ffffff',
            },
            Button: {
                colorBgContainer: '#2a2a2a',
                colorBorder: '#434343',
                colorText: '#ffffff',
            },
        },
    };

    // 加载转场类型
    useEffect(() => {
        if (visible) {
            loadTransitionTypes();
        }
    }, [visible]);

    const loadTransitionTypes = async () => {
        setLoading(true);
        try {
            const response = await getOperationTypes('transition');
            if (response && response.data && response.data.operation_info) {
                const types = response.data.operation_info.types || [];
                setTransitionTypes(types);
                if (types.length > 0) {
                    setSelectedType(types[0]);
                }
            }
        } catch (error) {
            console.error('加载转场类型失败:', error);
            message.error('加载转场类型失败');
        } finally {
            setLoading(false);
        }
    };

    const handleSubmit = async () => {
        if (!selectedType) {
            message.warning('请选择转场类型');
            return;
        }

        setSubmitting(true);
        try {
            const operations = [
                {
                    operation_type: 'transition' as const,
                    params: {
                        transition_type: selectedType,
                        transition_params: {
                            duration: duration,
                        },
                    },
                },
            ];

            await addVideoOperations({
                draft_id: draftId,
                track_id: trackId,
                segment_id: segmentId,
                operations,
            });

            message.success('转场添加成功');
            onSuccess();
        } catch (error) {
            console.error('添加转场失败:', error);
            message.error('添加转场失败');
        } finally {
            setSubmitting(false);
        }
    };

    const handleCancel = () => {
        setSelectedType('');
        setDuration('1s');
        onCancel();
    };

    return (
        <ConfigProvider theme={darkTheme}>
            <Modal
                title="选择转场效果"
                open={visible}
                onCancel={handleCancel}
                onOk={handleSubmit}
                okText="添加转场"
                cancelText="取消"
                confirmLoading={submitting}
                width={400}
                styles={{
                    body: { backgroundColor: '#2a2a2a' },
                    header: { backgroundColor: '#2a2a2a', borderBottom: '1px solid #434343' },
                    footer: { backgroundColor: '#2a2a2a', borderTop: '1px solid #434343' },
                }}
            >
                <div style={{ padding: '16px 0' }}>
                    <Row gutter={[16, 16]}>
                        <Col span={24}>
                            <Text style={{ color: '#ffffff', fontSize: '14px', display: 'block', marginBottom: '8px' }}>
                                转场类型
                            </Text>
                            <Select
                                value={selectedType}
                                onChange={setSelectedType}
                                style={{ width: '100%' }}
                                loading={loading}
                                placeholder="请选择转场类型"
                            >
                                {transitionTypes.map((type) => (
                                    <Option key={type} value={type}>
                                        {type}
                                    </Option>
                                ))}
                            </Select>
                        </Col>
                        <Col span={24}>
                            <Text style={{ color: '#ffffff', fontSize: '14px', display: 'block', marginBottom: '8px' }}>
                                持续时间
                            </Text>
                            <Input
                                value={duration}
                                onChange={(e) => setDuration(e.target.value)}
                                placeholder="1s"
                                suffix="秒"
                            />
                        </Col>
                    </Row>
                </div>
            </Modal>
        </ConfigProvider>
    );
};

export default TransitionModal;
